<!DOCTYPE html>
<html lang="ch-ZN">

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit" />
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>团购_详情</title>
  <link rel="stylesheet" href="../../lib/css/reset.min.css">
  <link rel="stylesheet" href="../../css/all.min.css">
  <script src="../../lib/js/flexible.js"></script>
</head>

<body>
  <div id="tuan_detail" class="app-wrap" v-cloak>
    <div class="shop-i-fixed">
      <div class="shop-i-head">
        <div class="top">
          <div class="top-left">
            <div class="icon-back-product"></div>
            <div class="title">拼团详情</div>
          </div>
        </div>
      </div>
    </div>
    <div class="tuan_message margin-top-144" v-if="status===1">
      <i class="success"></i>
      <div class="msg">
        <p class="line1">参团成功啦！</p>
        <p class="line2">还差4人成团，邀请好友参团方可成团。</p>
      </div>
    </div>
    <div class="tuan_message margin-top-144" v-else-if="status===2">
      <i class="success"></i>
      <div class="msg">
        <p class="line1">拼团成功啦！</p>
        <p class="line2">请尽情享受愉悦购物。</p>
      </div>
    </div>
    <div class="tuan_message margin-top-144" v-else-if="status===3">
      <i class="fail"></i>
      <div class="msg">
        <p class="line1">拼团失败</p>
        <p class="line2">可参与其他团购继续您的购物之旅。</p>
      </div>
    </div>
    <!-- 商品信息 -->
    <div class="bg-gary">
      <div class="bg-white p-48">
        <div class="tuan-d-pro">
          <div class="img-wrap mr-48">
            <img :src="product.img">
          </div>
          <div class="info-wrap">
            <p class="title">{{product.title}}</p>
            <div class="tip">
              <p>{{product.join_count}}人团购 · 已团{{product.sell_count}}件</p>
              <p>
                <span class="price">¥{{product.sellprice}}</span> 团购立省{{product.savedprice}}元
              </p>
            </div>
          </div>
          <div class="common-status" :class="{ 'success': status===2, 'fail': status===3 }" v-show="status===2||status===3">
            <p v-if="status===2" class="text">拼团成功</p>
            <p v-else-if="status===3" class="text">拼团失败</p>
            <span class="circle c1"></span>
            <span class="circle c2"></span>
            <span class="circle c3"></span>
          </div>
        </div>
        <div class="tuan-d-members">
          <div class="members">
            <div class="member" :class="[index===0 ? 'bd-red' : 'bd-white']" v-for="(member,index) in members">
              <img :src="member">
              <span class="leader" v-if="index === 0">团长</span>
            </div>
            <a href="./tuan_member.html">
              <div class="member bd-gray">
                <i class="more"></i>
              </div>
            </a>
          </div>
          <p class="member-leave">仅剩<span class="count">{{leave_count}}</span>个名额，20:30:40.5后结束</p>
          <div class="joinnow-wrap">
            <button class="joinnow">邀请好友参团</button>
          </div>
        </div>
      </div>
      <!-- 参团规则 -->
      <div class="tuan-d-rule bg-white mt-30">
        <p class="title">参团规则</p>
        <div class="steps">
          <div class="step">
            <span class="num">1</span>
            <p class="text">选择商品</p>
          </div>
          <div class="step">
            <span class="num">2</span>
            <p class="text">开团/参团</p>
          </div>
          <div class="step">
            <span class="num">3</span>
            <p class="text">邀请好友</p>
          </div>
          <div class="step">
            <span class="num">4</span>
            <p class="text">人满成团</p>
          </div>
        </div>
        <ul class="rule-list p-48">
          <li>1.开团：在商城内喜欢的商品，点击“去开团”，付款成功后 即为开团成功；</li>
          <li>2.参团：进入朋友分享的页面，点击“立即参团”，付款后即 为参团成功，若多人同时支付，按先支付成功的用户获得参团 资格；</li>
          <li>3.成团：在开团或参团之后，可以点击“分享出去”，在有效 时间凑齐团人数及拼团成功；</li>
          <li>4.组团失败：在有效时间内为凑齐人数，即为组团失败，此时 商城会将原款分别退回；</li>
        </ul>
      </div>
    </div>
  </div>
  <script src="../../lib/js/fastclick.js"></script>
  <script src="../../lib/js/vue.js"></script>
  <script src="../../lib/js/axios.min.js"></script>
  <!-- mock 数据 打包发布的时候记得移除 -->
  <script src="http://mockjs.com/dist/mock.js"></script>
  <script src="../../js/all.min.js"></script>
  <script>
    tuan_detail();
  </script>
</body>

</html>